<template>
  <div class="login">
        <h2>Login</h2>
        <form @submit.prevent="handleSubmit">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" v-model="username" name="username" class="form-control" :class="{ 'is-invalid':!username }" />
                <div v-show="!username" class="invalid-feedback">Username is required</div>
            </div>
            <div class="form-group">
                <label htmlFor="password">Password</label>
                <input type="password" v-model="password" name="password" class="form-control" :class="{ 'is-invalid': !password }" />
                <div v-show="!password" class="invalid-feedback">Password is required</div>
            </div>
            <div class="form-group">
                <button class="btn btn-primary">Login</button>
            </div>
        </form>
    </div>
</template>

<script>
export default {
  name: 'Login',
   data () {
        return {
            username: '',
            password: '',
        }
    },
  methods: {
    handleSubmit() {
        const { username, password } = this;
        if (username && password) {
            this.$store.dispatch('login', {
                username : username,
                password : password
            })
        }
    }
  }
}
</script>